// 导入路由
import { Route, Switch } from "react-router-dom";
// 注意：此处需要导入 Router
import { Router } from "react-router-dom";
import { customHistory } from "./utils/history";
import { Redirect } from "react-router-dom";
import { lazy, Suspense } from "react";
import { AuthRoute } from "./components/AuthRoute";
// 路由懒加载
const Login = lazy(() => import("./pages/Login"));
const Layout = lazy(() => import("./pages/Layout"));
const Search = lazy(() => import("./pages/Search"));
const SearchResult = lazy(() => import("./pages/Search/Result"));
const Article = lazy(() => import("./pages/Article"));
const Chat = lazy(() => import("./pages/Chat"));
const ProfileEdit = lazy(() => import("./pages/Profile/Edit"));
// 配置路由规则
function App() {
    return (
        <Router history={customHistory}>
            <div className="app">
                <Suspense fallback={<div>loading...</div>}>
                    <Switch>
                        <Route path="/home" component={Layout} />
                        <Route path="/login" component={Login} />
                        <Route path="/search/result" component={SearchResult} />
                        <Route exact path="/search" component={Search} />
                        <Route path="/article/:artId" component={Article} />
                        <AuthRoute path="/profile/edit">
                            <ProfileEdit />
                        </AuthRoute>
                        <AuthRoute path="/chat">
                            <Chat />
                        </AuthRoute>
                        <Route
                            exact
                            path={"/"}
                            render={() => <Redirect to="/home/index" />}
                        />
                        ;
                    </Switch>
                </Suspense>
            </div>
        </Router>
    );
}

export default App;
